<template>

    <vue-select-table :options="$store.state.years" :data-source="tableList">
        <template slot="header">
            <tr>
                <th>ID</th>
                <th>课程名称</th>
                <th>学期</th>
                <th>课程号</th>
                <th>课序号</th>
                <th>操作</th>
            </tr>
        </template>
        <template slot="tbody" slot-scope="props">
            <tr>
                <td>{{props.item.id}}</td>
                <td>{{props.item.c_name}}</td>
                <td>{{props.item.semesters?props.item.semesters.s_name:'已删除'}}</td>
                <td>{{props.item.c_number}}</td>
                <td>{{props.item.serial_number}}</td>
                <td class="col-lg-2">
                    <button title="修改" class="btn btn-white btn-xs m-b-none"
                            v-on:click="showEditDialog(props.item.id)">
                        <i class="fa fa-pencil list-btn-i"></i> 编辑
                    </button>
                    <button class="btn btn-white btn-xs m-b-none" title="删除"
                            v-on:click="showDeleteDialog(props.item.id)">
                        <i class=" fa fa-trash list-btn-i"></i> 删除
                    </button>
                </td>

            </tr>
        </template>
    </vue-select-table>
</template>

<script>
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      return {
        list: this.$listDataSource({
          url: 'api/course/course'
        })
      };
    },
    methods: {
      showEditDialog: function (uuid) {
        console.log(uuid);
        this.stateManager.editModelId = uuid;
        this.stateManager.editDialogVisible = true;

      },
      showDeleteDialog: function (uuid) {
        this.stateManager.deleteDialogVisible = true;
        this.stateManager.deleteModelId = uuid;
      }
    },
    computed: {
      user(){
        return this.$store.state.user;
      },

      tableList(){
        if (this.stateManager.refreshList) {
          this.list.fetch();
          this.stateManager.refreshList = false;
        }
        return this.list;
      }
    }
  }
</script>